<template>
  <!-- app版本维护 -->
  <div class="app-list-wrap">
    <!-- 查询条件 -->
    <el-row type="flex" justify="space-between">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline" @submit.native.prevent>
        <el-form-item>
          <tree-select
            @node-click="handleNodeClick"
            v-model="searchForm.organizationId"
            placeholder="请选择平台"
            filterable
            :width="386"
            :data="ucAllOrgList"
            :defaultProps="buildDefaultProps"
            :checkedKeys="defaultCheckedBuildId"
            :nodeKey="buildNodeKey"
          ></tree-select>
        </el-form-item>
        <el-form-item>
          <el-select @change="search" v-model="searchForm.type" placeholder="请选择平台类型">
            <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button class="form-search-btn" type="primary" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
      <div class="more-btns">
        <el-button type="primary" @click="editDetail(0,{})">新增</el-button>
      </div>
    </el-row>
    <!-- 数据列表 -->
    <el-table v-loading="loading" ref="platVersionTableList" :data="tableData" style="width: 100%">
      <el-table-column label="序号" type="index" prop="id" width="100"></el-table-column>
      <el-table-column label="所属平台" prop="organizationName"></el-table-column>
      <el-table-column label="版本名称" prop="softName"></el-table-column>
      <el-table-column label="发布人" prop="createAccountName"></el-table-column>
      <el-table-column label="发布时间" prop="createTime"></el-table-column>
      <el-table-column label="版本号" prop="softNumber"></el-table-column>
      <el-table-column label="备注" prop="remarks"></el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button @click="showDetail(scope.row)" type="text" size="small">详情</el-button>
          <el-button @click="editDetail(1,scope.row)" type="text" size="small">编辑</el-button>
          <el-button @click="deleteAppV(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
      <el-table-column type="expand" width="1">
        <template slot-scope="props">
          <el-form inline class="demo-table-expand" label-width="150px">
            <el-form-item label="版本名称：">
              <span>{{ props.row.softName}}</span>
            </el-form-item>
            <el-form-item label="版本号：">
              <span>{{ props.row.softNumber}}</span>
            </el-form-item>
            <el-form-item label="是否强制更新：">
              <span>{{props.row.isManupdate == "1" ? '是' : '否'}}</span>
            </el-form-item>
            <el-form-item label="发布人：">
              <span>{{ props.row.createAccountName }}</span>
            </el-form-item>
            <el-form-item label="联网单位：">
              <span>{{ props.row.organizationName }}</span>
            </el-form-item>
            <el-form-item label="发布时间：">
              <span>{{ props.row.createTime }}</span>
            </el-form-item>
            <el-form-item label="内容：">
              <span>{{ props.row.content }}</span>
            </el-form-item>
            <el-form-item label="安装包路径：">
              <span>{{ props.row.url }}</span>
            </el-form-item>
            <el-form-item label="安装包大小（M）：">
              <span>{{ props.row.size }}</span>
            </el-form-item>
            <el-form-item label="备注：">
              <span>{{ props.row.remarks }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-sizes="[10, 50, 100]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
    <!-- 编辑 -->
    <el-dialog
      :close-on-click-modal="false"
      :title="editTitle"
      width="600px"
      top="15vh"
      v-if="dialogEditInfo"
      :visible.sync="dialogEditInfo"
      @close="closeEditInfo"
      v-dialogDrag
    >
      <app-v-info
        :platVersionInfo="editPlatVersionInfo"
        :ucOrgList="ucOrgList"
        :closeFun="closeEditInfo"
      ></app-v-info>
    </el-dialog>
  </div>
</template>
<style>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 150px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 100%;
}
</style>
<script>
import TreeSelect from '@/libs/TreeSelect/Main'
import { getUcOrgTree } from '@/api/user'
import { getUcOrgList } from '@/api/org'
import { getListAppV, delAppV } from '@/api/sysConfig'
import appVInfo from '../Dialog/appVInfo'
export default {
  name: 'AppVersionList',
  // 引入子组件
  components: {
    appVInfo,
    TreeSelect,
  },
  data() {
    return {
      typeList: [
        { id: 1, name: 'ios' },
        { id: 2, name: 'android' },
        { id: 3, name: '视频客户端' },
        { id: 4, name: '平台客户端' },
        { id: 5, name: 'h5' },
        { id: 50, name: '思维h5' },
        { id: 7, name: '平台前端' },
      ],
      // 平台名称选项
      ucAllOrgList: [],
      ucOrgList: [],
      buildDefaultProps: {
        children: 'nodes',
        label: 'name',
        value: 'id',
      },
      buildNodeKey: 'id',
      defaultCheckedBuildId: [],
      editTitle: '编辑',
      pageLoading: false,
      loading: false,
      dialogEditInfo: false,
      // 搜索条件
      searchForm: {
        queryType: 1,
        organizationId: 0,
        type: 1,
      },
      // 列表数据
      tableData: [],
      // 分页
      currentPage: 1,
      pageSize: 10,
      total: 0,
      editPlatVersionInfo: {},
    }
  },
  created() {
    //入口
    let that = this
    // 获取业主单位信息
    getUcOrgTree().then((res) => {
      if ((res.status = 200)) {
        let arr = [
          {
            nodes: [],
            name: '全部平台',
            id: 0,
          },
        ]
        that.ucOrgList = res.data
        that.ucAllOrgList = arr.concat(res.data)
        // 默认选择全部
        that.$nextTick(() => {
          that.defaultCheckedBuildId = [0]
        })
      }
    })
    // 加载列表
    that.getTableData()
  },
  methods: {
    // 获取列表数据
    getTableData(pageIndex, pageSize) {
      let that = this
      that.loading = true
      if (pageIndex) {
        that.currentPage = pageIndex
      }
      if (pageSize) {
        that.pageSize = pageSize
      }
      let parames = {
        queryType: 1,
        organizationId: that.searchForm.organizationId,
        pageSize: that.pageSize,
        pageIndex: that.currentPage - 1,
        type: that.searchForm.type,
      }
      // 获取列表信息
      getListAppV(parames).then((res) => {
        that.tableData = res.data
        that.total = res.total
        that.loading = false
      })
    },
    search() {
      this.getTableData(1)
    },
    handleSizeChange(pageSize) {
      this.getTableData(1, pageSize)
    },
    handleCurrentChange(currentPage) {
      this.getTableData(currentPage)
    },
    // 删除
    deleteAppV(row) {
      let that = this
      if (row) {
        that
          .$confirm('确定要删除吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            roundButton: true,
          })
          .then(() => {
            // 调用删除接口
            delAppV({
              id: row.id,
            }).then((res) => {
              if (res.status === 200) {
                that.$message({
                  type: 'success',
                  message: '操作成功!',
                })
                // 刷新列表
                that.getTableData()
              } else {
                that.$message.error(res.info)
              }
            })
          })
          .catch(() => {})
      }
    },
    //详情
    showDetail(row) {
      let that = this

      this.$refs.platVersionTableList.toggleRowExpansion(row)
    },
    // 编辑
    editDetail(type, row) {
      let that = this
      if (type == 0) {
        that.editTitle = '新增'
      } else {
        this.editTitle = '编辑'
      }

      if (row) {
        that.editPlatVersionInfo = row
        that.dialogEditInfo = true
      }
    },
    // 关闭编辑弹框
    closeEditInfo(flag) {
      let that = this
      that.dialogEditInfo = false
      if (flag) {
        this.getTableData(this.editPlatVersionInfo.id ? '' : 1)
      }
    },
    // 节点被点击时的回调,返回被点击的节点数据
    handleNodeClick(data, node, item) {
      this.searchForm.organizationId = data.id
      this.$emit('node-click', data, node, item)
      this.search()
    },
  },
}
</script>
